﻿<!DOCTYPE html />
<html ng-app="demoApp" lang="en">
<head>
    <title id='Description'>AngularJS Chart OHLC series example</title>
   <meta name="description" content="This is an example of AngularJS Chart. Chart OHLC series are displayed." />		
    <link rel="stylesheet" type="text/css" href="../../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../../scripts/angular.min.js"></script> <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxchart.core.js"></script><script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxchart.rangeselector.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxresponse.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope, $interval) {
            // prepare the data
            var source =
            {
                datatype: "tsv",
                datafields: [
                    { name: 'Date' },
                    { name: 'SPOpen' },
                    { name: 'SPHigh' },
                    { name: 'SPLow' },
                    { name: 'SPClose' },
                    { name: 'SPVolume' },
                    { name: 'SPAdjClose' },
                    { name: 'NQOpen' },
                    { name: 'NQHigh' },
                    { name: 'NQLow' },
                    { name: 'NQClose' },
                    { name: 'NQVolume' },
                    { name: 'NQAdjClose' }
                    ],
                url: '../../sampledata/nasdaq_vs_sp500_detailed.txt'
            };

            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

            var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
                var dataItem = dataAdapter.records[itemIndex];
                var volume = serie == 0 ? dataItem.SPVolume : dataItem.NQVolume;

                return '<DIV style="text-align:left"><b>Date: ' +
                        categoryValue.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
                        '</b><br />Open price: $' + value.open +
                        '</b><br />Close price: $' + value.close +
                        '</b><br />Low price: $' + value.low +
                        '</b><br />High price: $' + value.high +
                        '</b><br />Daily volume: ' + volume
                '</DIV>';
            };

            // prepare jqxChart settings
            var settings = {
                title: "NASDAQ and S&P 500 - OHLC Example",
                description: "(June 2010 - November 2014)",
                enableAnimations: true,
                animationDuration: 1500,
                enableCrosshairs: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                source: dataAdapter,
                xAxis:
                    {
                        dataField: 'Date',
                        formatFunction: function (value) {
                            return value.getDate() + '-' + months[value.getMonth()] + '<br>' + value.getFullYear().toString();
                        },
                        type: 'date',
                        valuesOnTicks: true,
                        minValue: new Date(2014, 1, 1),
                        maxValue: new Date(2014, 10, 1),
                        rangeSelector: {
                            // Uncomment the line below to render the selector in a separate container 
                            renderTo: $('#selectorContainer'),
                            // size: 120,
                            padding: { left: 25, right: 10, top: 10, bottom: 10 },
                            backgroundColor: 'white',
                            dataField: 'SPClose',
                            baseUnit: 'month',
                            showGridLines: false,
                            formatFunction: function (value) {
                                return months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
                            }
                        }
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'ohlc',
                            //skipOverlappingPoints: false,
                            toolTipFormatFunction: toolTipCustomFormatFn,
                            valueAxis:
                            {
                                description: 'S&P 500<br>'
                            },
                            series: [
                                {
                                    dataFieldClose: 'SPClose',
                                    displayTextClose: 'S&P Close price',
                                    dataFieldOpen: 'SPOpen',
                                    displayTextOpen: 'S&P Open price',
                                    dataFieldHigh: 'SPHigh',
                                    displayTextHigh: 'S&P High price',
                                    dataFieldLow: 'SPLow',
                                    displayTextLow: 'S&P Low price',
                                    displayText: 'S&P 500',
                                    lineWidth: 1
                                }
                            ]
                        },
                        {
                            type: 'line',
                            toolTipFormatFunction: toolTipCustomFormatFn,
                            valueAxis:
                            {
                                position: 'right',
                                description: '<br>NASDAQ',
                                showGridLines: false
                            },
                            series: [
                                {
                                    dataField: 'NQClose',
                                    dataFieldClose: 'NQClose',
                                    displayTextClose: 'Nasdaq Close price',
                                    dataFieldOpen: 'NQOpen',
                                    displayTextOpen: 'Nasdaq Open price',
                                    dataFieldHigh: 'NQHigh',
                                    displayTextHigh: 'Nasdaq High price',
                                    dataFieldLow: 'NQLow',
                                    displayTextLow: 'Nasdaq Low price',
                                    displayText: 'NASDAQ',
                                    lineWidth: 1
                                }
                            ]
                        }
                    ]
            };

            $scope.chartSettings = settings;
        });
    </script>
</head>
<body ng-controller="demoController">
    <div>
        <jqx-chart jqx-settings="chartSettings" style="width:800px; height:500px;">
        </jqx-chart>
        <br />
        <!-- you can optionally render the selecor in this container -->
        <div id='selectorContainer' style="width:800px; height:100px;">
        </div>
    </div>
</body>
</html>